<template>
  <div>
    <Row>
      <Col style="line-height: 40px">
        <Avatar src="/static/images/info.jpeg" size="40" style="margin: 0 10px 0 10px"/>
        <span style="font-weight: bold; font-size: 20px; color: #464c5b">小美mini第一次巡检-<span class="detail">正在运行...</span></span>
      </Col>
      <Col flex="auto">
      </Col>
      <Col>
        <Button icon="ios-download-outline" type="primary">导出报告</Button>
      </Col>
    </Row>
    <Row :gutter="20">
      <Col span="7" offset="1">
        <p><span class="task-title">创建人员: </span>辉东同学</p>
        <p><span class="task-title">创建时间: </span>2021-11-12 14:23:33</p>
        <p><span class="task-title">开始时间: </span>2021-11-12 15:45:34</p>
        <p><span class="task-title">任务简介: </span>这是一段任务简介这是一段任务简介这是一段任务简介这是一段任务简介这是一段任务简介</p>
      </Col>
      <Col span="6">
        <p><span class="task-title">用例总数: </span>201</p>
        <p><span class="task-title">通过用例: </span>123</p>
        <p><span class="task-title">失败用例: </span>23</p>
        <p><span class="task-title">未测用例: </span>45</p>
      </Col>
      <Col span="6">
        <p><span class="task-title">任务状态: </span><span class="detail">正在运行</span></p>
        <p><span class="task-title">测试进度: </span><span class="detail">52%</span></p>
      </Col>
    </Row>
    <Tabs value="name1" style="margin-top: 10px">
      <TabPane label="已测试用例" name="name1">
        <Table :columns="columns10" :data="data9"></Table>
      </TabPane>
      <TabPane label="未测试用例" name="name2">标签二的内容</TabPane>
    </Tabs>
  </div>
</template>
<script>
import TestReportInfo from "./TestReportInfo";
export default {
  name: "TaskInfo",
  components: {
    TestReportInfo
  },
  data () {
    return {
      split1: 0.5,
      percent: 100,
      columns10: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(TestReportInfo, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          title: '执行序号',
          key: 'id',
          width: 100,
          align: 'center'
        },
        {
          title: '执行语句',
          key: 'query',
        },
        {
          title: '所属模块',
          key: 'module',
          width: 200,
          align: 'center'
        },
        {
          title: '用例类型',
          key: 'is_smoke',
          width: 150,
          align: 'center'
        },
        {
          title: '执行时间',
          key: 'runtime',
          width: 200,
          align: 'center'
        },
        {
          title: '失败重试数',
          key: 'reruns',
          width: 150,
          align: 'center'
        },
        {
          title: '执行结果',
          key: 'result',
          width: 200,
          align: 'center'
        }
      ],
      data9: [
        {
          id: 1,
          query: '今天天气',
          runtime: '2021-11-12 14:12:23',
          module: '天气查询',
          is_smoke: '冒烟',
          reruns: 3,
          result: '成功',
          job: 'Data engineer',
          interest: 'badminton',
          birthday: '1991-05-14',
          book: 'Steve Jobs',
          movie: 'The Prestige',
          music: 'I Cry'
        },
        {
          id: 2,
          query: '定一个两分钟后的闹钟',
          runtime: '2021-11-12 14:12:23',
          module: '闹钟提醒',
          is_smoke: '冒烟',
          reruns: 3,
          result: '成功',
          job: 'Data Scientist',
          interest: 'volleyball',
          birthday: '1989-03-18',
          book: 'My Struggle',
          movie: 'Roman Holiday',
          music: 'My Heart Will Go On'
        },
        {
          id: 3,
          query: '放首歌',
          runtime: '2021-11-12 14:12:23',
          module: '资源点播',
          is_smoke: '冒烟',
          reruns: 3,
          result: '成功',
          job: 'Data Product Manager',
          interest: 'tennis',
          birthday: '1992-01-31',
          book: 'Win',
          movie: 'Jobs',
          music: 'Don’t Cry'
        },
        {
          id: 4,
          query: '天空为什么是蓝色的',
          runtime: '2021-11-12 14:12:23',
          module: '服务技能',
          is_smoke: '冒烟',
          reruns: 3,
          result: '成功',
          job: 'Data Analyst',
          interest: 'snooker',
          birthday: '1988-7-25',
          book: 'A Dream in Red Mansions',
          movie: 'A Chinese Ghost Story',
          music: 'actor'
        }
      ]
    }
  },
  computed: {
    circle_color () {
      return this.percent === 100 ? '#5cb85c' : '#ff5500'
    }
  }
}
</script>
<style scoped>
.task-title{
  font-size: 14px;
  font-weight: bold;
  padding-right: 10px;
}
p{
  margin-top: 10px;
  margin-bottom: 10px;
}
.detail{
  font-weight: bold;
  color: dodgerblue;
}
</style>
